/*!*<!--        学会查资料和模仿别人的代码-->*!*/
/*!*学会查资料和模仿别人的代码:html和css的注释不同*!*/
/*!* 元素 选择器：<aa></aa>  标签，容器，盒子，对象*!*/
/*!*元素 是拿到所有相同元素*!*/
/*!*如果元素的名字是自己随便写的，那么这个元素叫做自定义元素*!*/
/*!*最好少用自定义元素*!*/
/*!*aa {*!*/
/*!*    background-color: red;*!*/
/*!*}*!*/
/*!*类选择器：*!*/
/*!*.class-bbb{*!*/
/*!*    background-color: red;*!*/
/*!*}*!*/
/*!*id选择器*!*/
/*!*#id-bbb{*!*/
/*!*    background-color: green;*!*/
/*!*}*!*/
/*!*不能用关键字作为元素名称*!*/
/*!*title{*!*/
/*!*    background-color: chartreuse;*!*/
/*!*}*!*/
/*!*属性选择器*!*/
/*!* 第二个样式会覆盖前面的样式*!*/
/*!*div[title]{*!*/
/*!*    background-color: red;*!*/
/*!*}*!*/
/*!*#id-bbb{*!*/
/*!*    background-color: blueviolet;*!*/
/*!*}*!*/
/*!*div[title=title-bbb]{*!*/
/*!*    background-color: green;*!*/
/*!*}*!*/

/*!*    选择器的优先级 id选择器> 属性选择器>类选择器>元素选择器*!*/
/*!*div {*!*/
/*!*    background-color: aqua;*!*/
/*!*}*!*/

/*.class-bbb {*/
/*    !*background-color: blue;*!*/
/*    !* 边框：边框大小边框形状 边框颜色,里面三个参数可以换位置*!*/
/*    border: 2px solid blue;*/
/*    border-top-width: 20px;*/
/*    !*上面div和当前div的上边框的距离*!*/
/*    !*margin 边距*!*/
/*    !* 边距的四个参数： 上右下左*!*/
/*    !*外边距*!*/
/*    margin: 20px 15px 0 10px;*/


/*    !*margin-top: 20px;*!*/
/*    !*margin-left: 10px;*!*/
/*    !*margin-right: 15px;*!*/
/*    !*margin-bottom: 30px;*!*/


/*    !*边框和内容之间的距离*!*/
/*    !*padding内边距 *!*/
/*    !*padding: 5px 50px 25px 15px;*!*/

/*    !*padding-top: 5px;*!*/
/*    !*padding-right: 50px;*!*/
/*    !*padding-bottom: 25px;*!*/
/*    !*padding-left: 15px;*!*/
/*    !*背景指边框里面的所有内容包括内边距*!*/
/*    background-image: url("../img/banner_qtah.jpg");*/
/*    !*height: 300px;*!*/
/*    !*width: 300px;*!*/
/*    !*height: 808px;*!*/
/*    !*如果宽度太小，则其图片其他地方被隐藏*!*/
/*    width: 1000px;*/
/*    height: calc(1000 * 808px / 1920);*/
/*    !*    如果想让图片百分比显示则，让图片自适应外面的div高宽*!*/
/*    background-size: 100% 100%;*/
/*}*/

/*!* >子代选择器 空格  后代选择器拿到所有后代*/
/*div:nth-child(2)具体那个div*/
/**!*/
/*body > div:nth-child(2) {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/

/*!*body{*!*/
/*!*    display: flex;*!*/
/*!*    justify-content: center;*!*/
/*!*}*!*/
/*!*div[bbb]{*!*/
/*!*    background-color: aqua;*!*/
/*!*}*!*/
/*.class-aaa {*/
/*    !*background-color: red;*!*/
/*    border: 2px solid red;*/
/*}*/

/*.class-ccc {*/
/*    !*background-color: green;*!*/
/*    border: 2px solid green;*/
/*    !*鼠标样式*!*/
/*    cursor: pointer;*/
/*}*/



/*--------------------------中间内容---------------*/
.middle {
    display: flex;
    justify-content: center;
}

.middle > div {
    /*border: 1px solid red;*/
    width: 900px;
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
}

.middle > div > div {
    border: 1px solid gray;
}

.news {
    width: 480px;
}

.news > div:nth-child(2) {
    display: flex;
    justify-content: space-between;

}

.news > div:nth-child(2) > div:nth-child(1) {
    width: 200px;
    height: 200px;
}

.news > div:nth-child(2) > div:nth-child(1) img {
    width: 100%;
    height: 100%;
}

.news > div:nth-child(2) > div:nth-child(2) {
    width: 240px;
}

.news-content > div {
    border-bottom: 1px dashed gray;
    height: 50px;
    padding: 15px 0 0 0;
}

.product {
    width: 400px;
}

.product > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
}

.product > div:nth-child(2) > div {
    width: 185px;
    border: 1px solid red;
}

.product > div:nth-child(2) > div > div:nth-child(1) {
    height: 150px;
}

.product > div:nth-child(2) > div > div:nth-child(1) img {
    width: 100%;
    height: 100%;
}

